<template>
  <van-nav-bar
    left-arrow
    :title="$t('home.payCard')"
    @click-left="router.back()"
  >
  </van-nav-bar>
  <div class="app-pad sell-body sell">
    <div class="app-flex-bet sell-type sell-title">
      <div>
        {{ $t("home.type") }}
      </div>
      <div class="primary">
        {{ form.label }}/{{ form.gjLabel }}/{{ form.kLabel }}
      </div>
    </div>
    <div class="sell-title sell-price">
      {{ $t("sellCard.price") }}
    </div>
    <div class="sell-table">
      <van-row class="sell-hr">
        <van-col span="12" class="sell-td">{{ $t("home.faceValue") }}</van-col>
        <van-col span="12" class="sell-td">{{ $t("home.price") }}</van-col>
      </van-row>
      <van-row
        class="sell-hr"
        v-for="(obj, tIndex) in form.kind.showPrcoveryPrice"
        :key="tIndex"
      >
        <template v-for="(value, key) in obj" :key="key">
          <van-col span="12" class="sell-td">{{ key }}</van-col>
          <van-col span="12" class="sell-td primary">{{ value }}</van-col>
        </template>
      </van-row>
    </div>
    <div class="sell-title sell-price">
      {{ $t("sellCard.take") }}
    </div>
    <div class="sell-warn">
      <div>1.{{ $t("sellCard.request1") }}</div>
      <div>2.{{ $t("sellCard.request2") }}</div>
    </div>
    <div class="sell-title sell-price sell-star">
      {{ $t("sellCard.cardImg") }}
    </div>
    <div>
      <van-uploader v-model="data.file" class="sell-uploader" max-count="1">
        <div class="sell-upload">
          <div>
            <img src="@/assets/images/upload.png" alt="" />
            <div>{{ $t("sellCard.click") }}</div>
            <div>{{ $t("sellCard.upImg") }}</div>
          </div>
        </div>
      </van-uploader>
    </div>
    <div class="sell-title sell-price">
      {{ $t("sellCard.cardCode") }}
    </div>
    <input
      type="textarea"
      class="sell-input"
      v-model="data.cardPassword"
      :placeholder="$t('sellCard.placeCard')"
    />
    <div class="sell-title sell-price sell-star">
      {{ $t("sellCard.cardMoney") }}
    </div>
    <input
      type="number"
      class="sell-input"
      @input="onInput"
      v-model="data.cardMoney"
      :placeholder="$t('sellCard.placeCardMoney')"
    />
    <div class="sell-title sell-price">
      <span>{{ $t("sellCard.expectMoney") }}：</span
      ><span class="primary"> {{ data.money }} </span>&nbsp;&nbsp;&nbsp;
      <span>{{ $t("sellCard.expectInte") }}:</span
      ><span class="sell-warn"> {{ data.inte }} </span>
    </div>
    <div class="sell-title sell-price">{{ $t("sellCard.timeout") }}：</div>
    <div class="sell-warn">
      {{ $t("sellCard.expeTimeout") }}
    </div>
    <div style="text-align: center">
      <van-button
        type="primary"
        @click="onSubmit"
        :disabled="!data.cardMoney"
        plan
        :loading="data.loading"
        round
        class="sell-sure"
        >{{ $t("order.sure") }}</van-button
      >
    </div>
  </div>
</template>
<script setup>
// const uploadIcon = require("@/assets/images/upload.png")
// import uploadIcon from "@/assets/images/upload.png";
import { onMounted, reactive } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { submitOrder, getIntegralRatio } from "@/api/home";
import { onUpload } from "@/api/public";
import { Toast } from "vant";
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const form = JSON.parse(route.query.data);
const data = reactive({
  cardImageUrl: "",
  cardMoney: "",
  cardPassword: "",
  file: [],
  money: 0,
  scale: 1, // 积分比例
  inte: 0, // 积分
  loading: false,
});
// 获取参数计算积分以及金额
function onScale() {
  console.log("route.query.scale");
  console.log(data.scale);
  data.inte = data.scale * data.cardMoney || 0;
}
function onInput(e) {
  console.log(123);
  console.log(e.target.value);
  console.log(form.scale);
  let value = e.target.value;
  if (value > 99999) {
    data.cardMoney = 99999;
    value = 99999;
  }
  if (value < 0) {
    data.cardMoney = 0;
    value = 0;
  }
  let kindScale = form.kind.recyclePrice;
  let len = kindScale.length;

  for (let i = 0; i < len; i++) {
    let obj = kindScale[i];
    console.log("进来了", obj.recycleAmountFloor, value);
    if (+value < +obj.recycleAmountFloor) {
      if (i == 0) {
        console.log("进来计算了哦1", obj.recycleAmountFloor, value);
        console.log(
          "进来了222",
          value,
          obj.nlRecycleUnit,
          value * obj.nlRecycleUnit
        );
        data.money = +value * +obj.nlRecycleUnit;
        break;
      } else {
        console.log("进来计算了哦2", obj.recycleAmountFloor, value);
        data.money = value * kindScale[i - 1].nlRecycleUnit;
        break;
      }
    }
    if (i == len - 1) {
      console.log("超出了范围");
      data.money = value * kindScale[i].nlRecycleUnit;
    }
  }

  onScale();
}
// 获取积分比例
getIntegralRatio().then((res) => {
  if (res.code != 200) return;
  data.scale = res.data;
});
// 上传图片
async function onUploadImg() {
  console.log(data.file[0]);
  
  let ret = await onUpload({ file: data.file[0].file }).catch(
    () => (data.loading = false)
  );
  if (ret.code != 200) return (data.loading = false);
  return ret.url;
}
async function onSubmit() {
  if (data.loading) return
  data.loading = true;
  if (!data.file[0]) {
    Toast(t("person.uploadcardImg"));
    return;
  }
  let img = await onUploadImg();
  if (!img) return;
  const { cardMoney, cardPassword } = data;
  let params = {
    cardCode: cardPassword,
    cardImageUrl: img,
    cardMoney,
    cardPassword,
    recycleKindId: form.kind.id,
  };
  let ret = await submitOrder(params);
  data.loading = false;
  if (ret.code != 200) return (data.loading = false);
  Toast(t("person.identSucc"));
  data.cardImageUrl = "";
  data.cardMoney = "";
  data.cardPassword = "";
  data.file = [];
  data.money = 0;
  data.inte = 0;
  data.loading = false;
  router.replace({
    path: "/home",
  });
}
</script>
<style lang="less">
.sell {
  &-uploader,
  .van-uploader__preview-image {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background: #f2f5f7;
  }
  &-upload {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 34px;
    }
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #312f28;
    text-align: center;
    width: 110px;
    height: 110px;
  }
  &-title {
    font-size: 15px;
    color: #000;
    font-weight: 500;
  }
  &-body {
    height: calc(100vh - 48px);
    overflow: auto;
  }
  &-warn {
    color: #dd5e00;
    font-size: 13px;
  }
  &-type {
    padding: 15px 0;
    border-bottom: 1px solid #e6e6e6;
  }
  &-price {
    padding-top: 14px;
    padding-bottom: 10px;
    position: relative;
  }
  &-table {
    text-align: center;
    border-radius: 20px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    border: 1px solid var(--primary);
  }
  &-td {
    padding: 15px;
  }
  &-td + &-td {
    border-left: 1px solid var(--primary);
  }
  &-hr + &-hr {
    border-top: 1px solid var(--primary);
  }
  &-input {
    background: #f2f5f7;
    border-radius: 10px;
    border: none;
    width: calc(100% - 30px);
    padding: 11px 15px;
    font-size: 13px;
  }
  &-star::after {
    content: "*";
    position: absolute;
    color: var(--primary);
    font-size: 30px;
    // right: 0;
    top: 10px;
    margin-left: 3px;
  }
  &-sure {
    width: 220px;
    text-align: center;
    margin: 20px auto;
  }
}
</style>
